<script lang="jsx">
import { communityServer } from '@/api/customer'
import CRUD from '@/components/CRUD/index.vue'
import OrganizationDialog from '@/components/Organization/OrganizationDialog.vue'

export default {
  components: {
    CRUD,
  },
  props: {
    info: {
      default: {},
      type: Object,
    },
  },
  setup(props) {
    const columns = [
      { label: '编号', prop: 'community_id' },
      { label: '项目名称', prop: 'name' },
      { label: '项目联系方式', prop: 'phone' },
      { label: '地址', prop: 'address' },
      {
        label: '是否撤场',
        prop: 'is_back',
        minWidth: '100px',
        render: (row) => <span>{row.is_back ? '是' : '否'}</span>,
      },
      { label: '跟案律师', prop: 'user_name' },
    ]

    const filters = [{ key: 'company_id', value: props.info.company_id }]

    const createForm = [
      {
        label: '项目名称',
        key: 'name',
        type: 'input',
        required: true,
        props: { placeholder: '请输入项目名称' },
      },
      {
        label: '项目地址',
        key: 'address',
        type: 'input',
        required: true,
        props: { placeholder: '请输入项目地址' },
      },
      {
        label: '项目联系方式',
        key: 'phone',
        type: 'input',
        required: true,
        props: { placeholder: '请输入项目联系方式' },
      },
      {
        label: '是否撤场',
        key: 'is_back',
        type: 'radio',
        required: true,
        options: [
          { value: true, label: '是' },
          { value: false, label: '否' },
        ],
      },
      {
        label: '跟案律师',
        key: 'user',
        type: 'custom',
        props: { placeholder: '请选择跟案律师', type: 'user' },
        render: OrganizationDialog
      },
    ]

    return () => (
      <>
        <CRUD
          title="项目"
          rawKey="community_id"
          server={communityServer}
          columns={columns}
          createForm={createForm}
          editForm={createForm}
          fixedColWidth="150px"
          deleteable
          noPage
          filters={filters}
          beforeSubmit={(params) => {
            params.company_id = props.info.company_id
            params.user_id = params.user?.user_id || null
            delete params.user
            return params
          }}
          afterGetData={(data) => {
            data.forEach(item => {
              item.user = {
                user_id: item.user_id,
                name: item.user_name,
              }
            })
            return data
          }}
        ></CRUD>
        {/* <div class="mt-4">
          <el-button type="primary" onclick="onSubmit">
            保存
          </el-button>
          <el-button onclick="onClose">取消</el-button>
        </div> */}
      </>
    )
  },
}
</script>
